<template>
  <div id="all">
    <div v-if="isMain">
      <el-card class="box-card" style="width: 1180px">
        <!--搜索栏-->
        <div class="search">
          <el-row gutter="24">
            <el-col :span="6">
              <el-input
                size="medium"
                v-model="query.oiNo"
                placeholder="订单编号"
              ></el-input>
            </el-col>

            <el-col :span="8">
              <el-date-picker
                v-model="query.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始注册日期"
                end-placeholder="结束注册日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-col>

            <el-col :span="2">
              <el-button type="primary" size="medium" @click="loadOrder"
                >查询</el-button
              >
            </el-col>

            <el-col :span="2">
              <el-button type="info" size="medium" @click="resetInput"
                >重置</el-button
              >
            </el-col>
          </el-row>
        </div>

        <!--导出Excel-->
        <div>
          <el-row>
            <el-button type="success" @click="expExcel">导出订单</el-button>
          </el-row>
        </div>

        <!--表格-->
        <el-table :data="orderList" stripe style="width: 100%">
          <el-table-column prop="oiNo" label="订单编号"> </el-table-column>
          <el-table-column prop="oiStartTime" label="驶入时间">
          </el-table-column>
          <el-table-column prop="carLicensePlate" label="车牌号码">
          </el-table-column>
          <el-table-column prop="secName" label="所属路段"></el-table-column>
          <el-table-column prop="pkNo" label="泊位编号"></el-table-column>
          <el-table-column prop="insNickname" label="巡检员"></el-table-column>
          <el-table-column prop="oiAmount" label="订单金额"></el-table-column>
          <el-table-column prop="refStatus" label="售后状态">
            <template slot-scope="scope">
              <span v-if="scope.row.refStatus == '0'">待处理</span>        
              <span v-if="scope.row.refStatus == '1'">已处理</span>          
              <span v-if="scope.row.refStatus == '2'">不通过</span>          
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="#409EFF"
                @click="handleDetil(scope.row.refId)"
                >详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.currentPage"
          :page-sizes="pageInfo.pageSizes"
          :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
        >
        </el-pagination>
      </el-card>
    </div>

    <!---------------------------------------------详情信息---------------------------------------------->
    <div v-if="!isMain">
      <el-row gutter="24">
        <el-col :span="2">
          <el-button type="info" size="medium" @click="goBack">返回</el-button>
        </el-col>
      </el-row>
      <!--进度条-->
      <el-steps :active="active" finish-status="success">
        <el-step title="车辆驶入"></el-step>
        <el-step title="车辆驶离"></el-step>
        <el-step title="订单支付"></el-step>
      </el-steps>
      <el-divider></el-divider>

      <!--订单状态&结束按钮-->
      <el-row>
        <el-col :span="4">
          <div class="grid-content">
            当前订单状态 :退款订单--
            <span v-if="orderDetail.refStatus == '0'">待处理</span>        
            <span v-if="orderDetail.refStatus == '1'">已退款</span>          
            <span v-if="orderDetail.refStatus == '2'">不通过</span>          
          </div></el-col
        >
        <el-col :span="4"><div class="grid-content"></div></el-col>
        <el-col :span="4"><div class="grid-content"></div></el-col>
        <el-col :span="4"><div class="grid-content"></div></el-col>
        <el-col :span="4"><div class="grid-content"></div></el-col>
        <el-col :span="4">
          <div class="grid-content">
            <el-button type="danger" @click="dialogFormVisible = true"
              >退款处理</el-button
            >
          </div></el-col
        >
      </el-row>

      <!--异常处理dialog-->
      <el-dialog title="退款处理" :visible.sync="dialogFormVisible">
        <el-form :model="exceptionHandle">
          <el-form-item label="异常状态处理" :label-width="formLabelWidth">
            <el-radio v-model="exceptionHandle.refStatus" label="2"
              >不同意退款</el-radio
            >
            <el-radio v-model="exceptionHandle.refStatus" label="1"
              >同意退款</el-radio
            >
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="setExceptionHandle"
            >确 定</el-button
          >
        </div>
      </el-dialog>

      <el-divider></el-divider>
      <el-descriptions title="订单详情" direction="vertical" :column="4" border>
        <el-descriptions-item label="订单编号" :span="2">{{
          orderDetail.oiNo
        }}</el-descriptions-item>
        <el-descriptions-item label="驶入时间" :span="2">{{
          orderDetail.oiStartTime
        }}</el-descriptions-item>
        <el-descriptions-item label="车牌号码" :span="2">{{
          orderDetail.carLicensePlate
        }}</el-descriptions-item>
        <el-descriptions-item label="路段名称" :span="2">{{
          orderDetail.secName
        }}</el-descriptions-item>
        <el-descriptions-item label="泊位编号" :span="2">{{
          orderDetail.pkNo
        }}</el-descriptions-item>
        <el-descriptions-item label="巡检员名称" :span="2">{{
          orderDetail.insNickname
        }}</el-descriptions-item>
        <el-descriptions-item label="绑定用户" :span="2">{{
          orderDetail.userName
        }}</el-descriptions-item>
        <el-descriptions-item label="地磁" :span="2">{{
          orderDetail.geoModel
        }}</el-descriptions-item>
        <el-descriptions-item label="驶入图片" :span="2">
          <img :src="orderDetail.oiImgone" style="width: 60px; height: 60px" />
          <img :src="orderDetail.oiImgtwo" style="width: 60px; height: 60px" />
          <img
            :src="orderDetail.oiImgthree"
            style="width: 60px; height: 60px"
          />
        </el-descriptions-item>
        <el-descriptions-item label="驶离时间" :span="2">{{
          orderDetail.oiEndTime
        }}</el-descriptions-item>
        <el-descriptions-item label="支付时间" :span="2">{{
          orderDetail.payingTime
        }}</el-descriptions-item>
        <el-descriptions-item label="支付方式" :span="2">
          <span v-if="orderDetail.ptType == '0'">微信</span>        
          <span v-if="orderDetail.ptType == '1'">支付宝</span>        
        </el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>

      <el-descriptions
        title="订单收费规则-工作日"
        direction="vertical"
        :column="4"
        border
      >
        <el-descriptions-item label="繁忙时间开始" :span="2">{{
          orderDetail.weekdayBusyTimeStart
        }}</el-descriptions-item>
        <el-descriptions-item label="繁忙时间段结束" :span="2">{{
          orderDetail.weekdayBusyTimeEnd
        }}</el-descriptions-item>
        <el-descriptions-item label="是否包含免费时段" :span="2">
          <span v-if="orderDetail.isFree == '0'">包含</span>        
          <span v-if="orderDetail.isFree == '1'">不包含</span>        
        </el-descriptions-item>
        <el-descriptions-item label="免费停车时长(单位:分钟)" :span="2">{{
          orderDetail.weekdayFreeTime
        }}</el-descriptions-item>
        <el-descriptions-item
          label="繁忙时段收费标准(单位:元/小时)"
          :span="2"
          >{{ orderDetail.weekdayBusyStandardAmount }}</el-descriptions-item
        >
        <el-descriptions-item label="非繁忙收费标准(单位:元/小时)" :span="2">{{
          orderDetail.weekdayNotBusyStandardAmount
        }}</el-descriptions-item>
        <el-descriptions-item label="封顶金额" :span="2">{{
          orderDetail.weekdayPeakAmount
        }}</el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>

      <el-descriptions
        title="订单收费规则-非工作日"
        direction="vertical"
        :column="4"
        border
      >
        <el-descriptions-item label="繁忙时间开始" :span="2">{{
          orderDetail.weekEndBusyTimeStart
        }}</el-descriptions-item>
        <el-descriptions-item label="繁忙时间段结束" :span="2">{{
          orderDetail.weekEndBusyTimeEnd
        }}</el-descriptions-item>
        <el-descriptions-item label="是否包含免费时段" :span="2">
          <span v-if="orderDetail.isFree == '0'">包含</span>        
          <span v-if="orderDetail.isFree == '1'">不包含</span>        
        </el-descriptions-item>
        <el-descriptions-item label="免费停车时长(单位:分钟)" :span="2">{{
          orderDetail.weekEndFreeTime
        }}</el-descriptions-item>
        <el-descriptions-item
          label="繁忙时段收费标准(单位:元/小时)"
          :span="2"
          >{{ orderDetail.weekEndBusyStandardAmount }}</el-descriptions-item
        >
        <el-descriptions-item label="非繁忙收费标准(单位:元/小时)" :span="2">{{
          orderDetail.weekEndNotBusyStandardAmount
        }}</el-descriptions-item>
        <el-descriptions-item label="封顶金额" :span="2">{{
          orderDetail.weekEndPeakAmount
        }}</el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <!--合计-->
      <el-row>
        <el-col :span="4"> <div class="grid-content"></div></el-col>
        <el-col :span="4"><div class="grid-content"></div></el-col>
        <el-col :span="4"><div class="grid-content"></div></el-col>
        <el-col :span="4"><div class="grid-content"></div></el-col>
        <el-col :span="4"><div class="grid-content"></div></el-col>
        <el-col :span="4">
          <div class="grid-content">
            订单合计:{{ this.orderDetail.oiAmount }}元
          </div></el-col
        >
      </el-row>
      <el-divider></el-divider>
      <!--订单售后信息-->
      <el-descriptions
        title="订单售后信息"
        direction="vertical"
        :column="4"
        border
      >
        <el-descriptions-item label="申诉内容" :span="2">{{
          orderDetail.apContent
        }}</el-descriptions-item>
        <el-descriptions-item label="申诉图片" :span="2">
          <img :src="orderDetail.apImg" style="width: 60px; height: 60px" />
        </el-descriptions-item>
        <el-descriptions-item label="申诉时间" :span="2">{{
          orderDetail.apTime
        }}</el-descriptions-item>
        <el-descriptions-item label="申诉状态" :span="2">
          <span v-if="orderDetail.apStatus == '0'">待处理</span>        
          <span v-if="orderDetail.apStatus == '1'">已退款</span>      
          <span v-if="orderDetail.apStatus == '2'">不通过</span>      
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderList: [],
      pageInfo: {
        pageSizes: [5, 10, 20, 50],
        total: 0,
      },
      //封装的请求参数
      query: {
        currentPage: 1,
        pageSize: 5,
        oiNo: "",
        dateRange: [],
      },
      isMain: true,
      orderDetail: {},
      active: 3,
      updateStatusParam: {},
      //异常处理dialog表单数据
      exceptionHandle: {
        refStatus: "1",
      },
      dialogFormVisible: false,
      formLabelWidth: "120px",
    };
  },
  methods: {
    //异常处理模态框-确定按钮
    setExceptionHandle() {
      this.updateStatusParam.refStatus = this.exceptionHandle.refStatus;
      this.updateStatusParam.apId = this.orderDetail.apId;
      this.updateStatusParam.orderId = this.orderDetail.orderId;
      this.updateStatusParam.refId = this.orderDetail.refId;
      this.updateStatusParam.oiId = this.orderDetail.oiId;
      this.updateStatusParam.ptType = this.orderDetail.ptType;
      this.updateStatusParam.oiAmount = this.orderDetail.oiAmount;
      this.$axios
        .put("/admin/order/updateRefStatus", this.updateStatusParam)
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success("修改成功");
          } else {
            this.$message.success("修改失败");
          }
          this.dialogFormVisible = false;
        });
    },
    //当每页显示条数改变时
    handleSizeChange(size) {
      this.query.pageSize = size;
      this.loadOrder();
    },
    //当页数改变时
    handleCurrentChange(currentPage) {
      this.query.currentPage = currentPage;
      this.loadOrder();
    },
    //用户详情信息
    handleDetil(id) {
      this.isMain = !this.isMain;
      this.orderDetail = this.orderList[getArrayIndex(this.orderList, id)];
      this.changeProcessBar();
    },
    loadOrder() {
      this.$axios
        .post("/admin/order/queryAllRefOrder", this.query)
        .then((res) => {
          this.orderList = res.data.data.refundOrderVOS;
          this.pageInfo.total = res.data.data.total;
        });
    },
    resetInput() {
      this.query.oiNo = "";
      this.query.dateRange = [];
      this.loadOrder();
    },
    goBack() {
      this.loadOrder();
      this.isMain = !this.isMain;
    },
    //导出Excel
    expExcel() {
      window.location.href =
        "http://localhost:9000/admin/order/excelAllRefundOrder";
    },
  },
  mounted() {
    this.loadOrder();
  },
};
function getArrayIndex(arr, obj) {
  var i = arr.length;
  while (i--) {
    if (arr[i].refId === obj) {
      return i;
    }
  }
  return -1;
}
</script>

<style>
</style>